<template>
  <div class="dynamic">
    <div
      class="newsList"
      v-for="news in newsList"
      :key="news.id"
      @click="goNewsList(news)"
    >
      <h4>{{ news.newsTitle }}</h4>
      <img :src="news.newsImg" alt="" />
      <p>{{ news.newsCon }}</p>
      <span>发布日期{{ news.newsTime }}</span>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      newsList: []
    }
  },
  methods: {
    async getnews() {
      const res = await axios.get('http://localhost:3000/news')
      this.newsList = res.data
      // console.log(this.newsList)
    },
    goNewsList(news) {
      const index = this.newsList.indexOf(news) + 1
      // console.log(index)
      this.$router.push('newsinfo/' + index)
      // console.log(this.newsList)
      // console.log(news)
      this.clickNews = news
    }
  },
  created() {
    this.getnews()
  }
}
</script>
<style lang="scss" scoped>
.dynamic {
  padding: 0 9px;
  .newsList {
    width: 100%;
    height: auto;
    border-bottom: 1px dotted #cccccc;
    padding-bottom: 10px;
    h4 {
      font-weight: 300;
      font-size: 18px;
    }
    img {
      width: 100%;
    }
    p {
      font-size: 12px;
      color: #696969;
    }
    span {
      font-size: 12px;
      color: #696969;
    }
  }
}
</style>